<template>
    <div class="reg-main with-btn">
        <div class="reg-body">
            <i class="iconfont icon-close" @click="fnClose"></i>
            <div class="title">
                开通校园事业部
            </div>
            <div class="form">
                <el-form ref="ruleForm" :model="ruleForm" :rules="rules">
                    <el-form-item prop="mobile" class="login-input login-phone">
                        <el-input
                            v-model="ruleForm.mobile"
                            type="phone"
                            class="el-input-white"
                            auto-complete="off"
                            placeholder="输入手机号"
                            :style="{ marginLeft: '-24px' }"
                        />
                    </el-form-item>
                    <el-form-item
                        prop="captcha"
                        class="login-input reg-verify-code"
                    >
                        <div class="reg-verify-code-line">
                            <el-input
                                v-model="ruleForm.captcha"
                                type="text"
                                auto-complete="off"
                                placeholder="输入图形验证码"
                                class="el-input-white el-input-code"
                            />
                            <div
                                class="login-caotch"
                                :style="{
                                    background: `url(${captchaImg}) center center no-repeat`,
                                    backgroundSize: 'cover'
                                }"
                                @click="getCaptcha()"
                            ></div>
                        </div>
                    </el-form-item>
                    <el-form-item
                        prop="verify"
                        class="login-input reg-verify-code"
                    >
                        <div class="reg-verify-code-line">
                            <el-input
                                v-model="ruleForm.verify"
                                type="text"
                                auto-complete="off"
                                placeholder="输入短信验证码"
                                class="el-input-white el-input-code"
                            />
                            <a
                                :class="{
                                    'code-link': true,
                                    'code-disabled': codeDisabled
                                }"
                                href="javascript:;"
                                @click="getVerifyCode"
                                >{{ verifyCodeStr }}</a
                            >
                        </div>
                    </el-form-item>
                    <el-form-item class="login-input login-phone">
                        <el-input
                            v-model="ruleForm.referrer"
                            type="phone"
                            class="el-input-white"
                            auto-complete="off"
                            placeholder="请填写推荐人名字 (选填)"
                            :style="{ marginLeft: '-24px' }"
                        />
                    </el-form-item>
                </el-form>
                <!-- TODO 修改链接 -->
                <div class="btn-wrap">
                    <a
                        href="javascript:void(0)"
                        class="reg-btn"
                        @click="loginByPhone"
                    >
                        入驻
                    </a>
                </div>
                <div class="has-acc">
                    <a
                        v-if="qrcode == ''"
                        href="javascript:void(0);"
                        class="login-link"
                        @click="regToLogin(1)"
                        >已有账号去登录</a
                    >
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import { mapState } from 'vuex'
export default {
    data() {
        const checkPassword = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请再次输入密码'))
            } else if (value !== this.ruleForm.password) {
                callback(new Error('两次输入密码不一致!'))
            } else {
                callback()
            }
        }
        return {
            autoLogin: false,
            phone: '',
            verifyCode: '',
            verifyCodeTimer: '',
            psd: '',
            repeatPsd: '',
            company: '',
            inviteCode: '',
            verifyCodeStr: '获取验证码',
            codeDisabled: false,
            qrcode: '', // 需要绑定的qrcode,
            dist: { pageName: 'dispatch', query: {} }, // 注册成功后跳转地址
            ruleForm: {
                mobile: '',
                verify: '',
                password: '',
                rpassword: '',
                company_name: '',
                invite_code: '',
                referrer: '',
                captcha: ''
            },
            captchaImg: '',
            rules: {
                mobile: [
                    {
                        required: true,
                        message: '请输入手机号',
                        trigger: 'blur'
                    },
                    { validator: this.checkPhone, trigger: 'blur' }
                ],
                verify: [
                    { required: true, message: '请输入验证码', trigger: 'blur' }
                ],
                captcha: [
                    {
                        required: true,
                        message: '请输入图形验证码',
                        trigger: 'blur'
                    }
                ],
                password: [
                    { required: true, message: '请输入密码', trigger: 'blur' },
                    {
                        min: 6,
                        max: 18,
                        message: '请输入6-18位密码',
                        trigger: 'blur'
                    }
                ],
                rpassword: [
                    {
                        required: true,
                        message: '请再次输入密码',
                        trigger: 'blur'
                    },
                    { validator: checkPassword, trigger: 'blur' }
                ],
                company_name: [
                    {
                        required: true,
                        message: '请输入公司名称',
                        trigger: 'blur'
                    }
                ]
            },
            agree: false
        }
    },
    computed: {
        ...mapState({
            sales: (state) => state.userInfo.sales
        })
    },
    watch: {},
    created() {
        this.getCaptcha()
    },
    methods: {
        getCaptcha() {
            this.$post('/User/sendVerifyGetCaptcha', {
                type: 1
            }).then((resp) => {
                if (resp.code == 1) {
                    this.captchaImg = resp.data.captcha_img
                } else {
                    this.$notify.error({
                        title: '错误',
                        duration: 2000,
                        message: resp.msg
                    })
                }
            })
        },
        checkPhone(rule, value, callback) {
            const reg = /^1[3456789]\d{9}$/
            if (reg.test(value)) {
                callback()
            } else {
                callback(new Error('请输入正确的手机号'))
            }
        },
        loginByPhone() {
            const that = this

            this.$refs.ruleForm.validate((valid) => {
                if (valid) {
                    this.$post('/User/phoneLogin', {
                        phone: that.ruleForm.mobile,
                        phone_verify_code: that.ruleForm.verify,
                        referrer: that.ruleForm.referrer
                    }).then(function(resp) {
                        if (resp.code == 1) {
                            that.getUserInfo()
                            that.getComponeyInfo()
                            setTimeout(() => {
                                that.$emit('success')
                            }, 300)
                        } else {
                            that.$notify.error({
                                title: '错误',
                                duration: 2000,
                                message: resp.msg
                            })
                        }
                    })
                } else {
                    console.log('error submit!!')
                    return false
                }
            })
        },
        fnClose() {
            this.$emit('close')
        },
        regToLogin(type) {
            this.$emit('changePage', 'login')
        },
        regToBind() {
            this.$emit('changePage', 'bind')
        },
        login(user, psd) {
            const that = this

            this.$post('/User/loginByPassword', {
                username: user,
                password: psd,
                is_remember: 0,
                ...this.sales
            }).then(function(resp) {
                if (resp.code == 1) {
                    // location.reload();
                    that.$emit('success')
                } else {
                    that.$notify.error({
                        title: '错误',
                        duration: 2000,
                        message: resp.msg
                    })
                }
            })
        },
        fnTimer(num) {
            let number = num

            if (this.verifyCodeTimer != null) {
                clearInterval(this.verifyCodeTimer)
            }
            this.verifyCodeStr = number + 's'
            this.verifyCodeTimer = setInterval(() => {
                number--
                if (!number) {
                    this.codeDisabled = false
                    clearInterval(this.verifyCodeTimer)
                    this.verifyCodeStr = '获取验证码'
                } else {
                    this.verifyCodeStr = number + 's'
                }
            }, 1000)
        },
        getVerifyCode() {
            this.checkPhone('mobile', this.ruleForm.mobile, (error) => {
                if (!error) {
                    if (this.codeDisabled) {
                        return
                    }
                    const that = this

                    this.$post('/User/sendVerify', {
                        type: 1,
                        mobile: that.ruleForm.mobile,
                        captcha: this.ruleForm.captcha.toUpperCase()
                    }).then((resp) => {
                        that.codeDisabled = true
                        if (resp.code == 1) {
                            this.fnTimer(60)
                            that.$notify.success({
                                title: '成功',
                                duration: 2000,
                                message: '请查收验证码'
                            })
                        } else if (resp.code == 0) {
                            that.$notify.error({
                                title: '错误',
                                duration: 2000,
                                message: resp.msg
                            })
                            that.codeDisabled = false
                        }
                    })
                }
            })
        },
        registerCertain() {
            const that = this
            let data = {}

            data = that.ruleForm
            if (this.$route.query.login_code) {
                data.handwmt_login_code = this.$route.query.login_code
            }
            if (this.$route.query.exclusive_url) {
                data.exclusive_url = this.$route.query.exclusive_url
            }
            // 扫码登录未注册时需要
            this.$refs.ruleForm.validate((valid) => {
                if (valid) {
                    // if (!this.agree) {
                    //     this.$message({
                    //         type: 'warning',
                    //         center: true,
                    //         message: '请先同意协议'
                    //     })
                    //     return
                    // }
                    this.$post('/User/register', {
                        ...data,
                        ...this.sales
                    }).then(function(resp) {
                        if (resp.code == 1) {
                            // that.login(that.ruleForm.mobile, that.ruleForm.password);
                            that.$notify.success({
                                title: '成功',
                                duration: 2000,
                                message: '注册成功，请登录！'
                            })
                            // location.reload();
                            that.$emit('success')
                        } else {
                            that.$notify.error({
                                title: '错误',
                                duration: 2000,
                                message: resp.msg
                            })
                        }
                    })
                }
            })
        },
        getUserInfo() {
            this.$post('/UserCenter/getUserInfo', {}).then((resp) => {
                if (resp.code == 1) {
                    this.$store.commit('userInfo/SET_USER_INFO', resp.data)
                }
            })
        },
        /**
         * 获取公司信息
         */
        getComponeyInfo() {
            this.$post('/UserCenter/getUserCompanyInfo', {}).then((resp) => {
                if (resp.code == 1) {
                    this.$store.commit(
                        'companyInfo/SET_COMPANY_INFO',
                        resp.data
                    )
                } else {
                    console.log(resp.msg)
                }
            })
        }
    }
}
</script>
<style lang="less" scoped>
.icon-close {
    width: 26px;
    height: 26px;
    font-size: 26px;
    color: #ccc;
    position: absolute;
    right: 16px;
    top: 16px;
    cursor: pointer;
}
.reg-main {
    position: realtive;
    // width: 500px;
    height: 532px;
    background-position: left top;
    background-size: 500px 532px;
    padding-left: 500px;
    background-repeat: no-repeat;
    background-image: url(//cdn.zsdx.cn/zsdx-website/2020/images/reg-btn.png);

    .reg-body {
        text-align: center;
        width: 500px;
        height: 532px;
        padding: 50px 70px 0 70px;
        background: #fff;
        position: relative;
        .title {
            height: 20px;
            font-size: 20px;
            font-weight: 500;
            color: rgba(0, 0, 0, 0.85);
            line-height: 20px;
            text-align: left;
            margin-bottom: 32px;
            white-space: nowrap;
        }
        .el-form {
            // height: 190px;
            margin-bottom: 24px;
        }
        .btn-wrap {
            width: 100%;
            margin-top: 20px;
            .reg-btn {
                display: block;
                width: 334px;
                height: 50px;
                background: rgba(32, 160, 255, 1);
                border-radius: 4px;
                font-size: 18px;
                font-weight: 500;
                color: rgba(255, 255, 255, 1);
                line-height: 50px;
                text-align: center;
            }
        }
        .login-input {
            margin-bottom: 20px;
        }
        .reg-verify-code {
            .code-link {
                width: 112px;
                color: #fff;
                text-decoration: none;
                display: inline-block;
                line-height: 50px;
                height: 50px;
                background: rgba(32, 160, 255, 1);
                border-radius: 4px;
            }
            .code-disabled {
                background: rgba(248, 119, 57, 0.3);
                cursor: default;
            }
        }
        .reg-verify-code-line {
            width: 334px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .login-caotch {
            width: 112px;
            height: 50px;
            cursor: pointer;
        }
    }
    .back-login {
        position: absolute;
        top: 20px;
        left: 20px;
        .back-login-link {
            text-decoration: none;
            font-size: 13px;
            color: #1f2d3d;
            font-weight: bold;
            &:hover {
                color: #00bbee;
            }
        }
    }
    .has-acc {
        width: 100%;
        text-align: center;
        margin-top: 38px;
        font-size: 16px;
        color: #20a0ff;
        .login-link {
            text-decoration: underline;
            color: #20a0ff;
            font-weight: 500;
        }
    }
}
.vip-agreement {
    text-align: left;
    color: #fff;
    line-height: 20px;
    margin-bottom: 0;
    &-check {
        margin-right: 5px;
        margin-left: 3px;
    }
    &-link {
        color: #20a0ff;
        &:hover {
            text-decoration: underline;
        }
    }
}
</style>
<style lang="less">
.reg-main {
    .reg-verify-code {
    }
    .login-input {
        margin: auto;
        margin-bottom: 24px;
        input,
        input:focus {
            height: 50px;
            line-height: 50px;
            font-size: 14px;
            width: 334px;
            padding-right: 18px;
            padding-left: 20px;
            box-sizing: border-box;
            color: #3f454b;
        }
        .el-input-white {
            input::-webkit-input-placeholder {
                color: #88909c !important;
            }
            input::-moz-placeholder {
                color: #88909c !important;
            }
            input:-moz-placeholder {
                color: #88909c !important;
            }
        }
        .el-input-code {
            width: 198px;
            input::-webkit-outer-spin-button,
            input::-webkit-inner-spin-button {
                -webkit-appearance: none;
            }
            input[type='number'] {
                -moz-appearance: textfield;
            }
            input,
            input:focus {
                width: 198px;
            }
        }
    }
}
</style>
